<template>
	<view>
		<view class="pd30 bold" style="color: #555;">
			上传音频
		</view>
		<view class="upload-wrap">
			<view class="btn-click mgb-16 upload-btn" @click="handleUploadClick" v-show="!disabled">
				<image :src="icons.upload" mode="aspectFill" class="upload-icon" />
				<text class="upload-text">上传{{ title[type] }}</text>
			</view>
			<view class="mgb-16 file-wrap" v-for="(item, index) in fileList" :key="index">
				<!-- <view class="btn-click file-line" @click="handlePreview(item)"> -->
				<view class="btn-click file-line">
					<view class="file-info">
						<image :src="icons[item.fileType || 'file']" mode="aspectFill" class="file-icon" />
						<text class="file-name">{{ item.name || title[type] }}</text>
					</view>
					<image :src="icons.close" mode="aspectFill" class="file-icon" v-if="!disabled"
						@click.stop="handleDeleteFile(index)" />
				</view>
			</view>
			<view class="mgb-16 file-wrap" v-if="fileList.length === 0 && disabled">
				<view class="file-line">
					<text class="file-empty">暂无数据</text>
				</view>
			</view>
		</view>
		<xe-upload ref="XeUpload" :options="uploadOptions" @callback="handleUploadCallback"></xe-upload>
		<view class="btnBox">
			<!-- <view class="btn cfff btn1" @click="playVoice">
				{{isplay?'暂停播放':'播放音频'}}
			</view> -->
			<!-- @click="handleUploadFile(item)" -->
			<view class="btn cfff btn2" @click="submit">
				提交音频
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'UploadDemo',
		components: {},
		props: {
			type: {
				default: 'file', // image, video, file
				type: String,
			},
			list: {
				default: () => ([]),
				type: Array,
			},
			disabled: {
				default: false,
				type: Boolean,
			},
		},
		data() {
			return {
				// uploadOptions 参数跟uni.uploadFile的参数是一样的（除了类型为Function的属性）
				uploadOptions: {
					// url: 'http://192.168.31.185:3000/api/upload', // 不传入上传地址则返回本地链接
				},
				audioUrl: '',
				ossInfo: {},
				fileList: [],
				title: {
					image: '图片',
					video: '视频',
					file: '文件',
				},
				icons: {
					upload: '/static/icon_upload.png',
					close: '/static/icon_close.png',
					image: '/static/icon_image.png',
					video: '/static/icon_video.png',
					file: '/static/icon_file.png',
				},
			};
		},
		watch: {
			list: {
				handler(val) {
					this.fileList = val || [];
				},
				immediate: true,
				deep: true,
			},
		},
		methods: {
			handleUploadClick() {
				// 使用默认配置则不需要传入第二个参数
				// App、H5 文件拓展名过滤 { extension: ['.doc', '.docx'] } 或者 { extension: '.doc, .docx' }
				this.$refs.XeUpload.upload(this.type);
				// 可以根据当前的平台，传入选择文件的参数，例如
				// 注意 当chooseMedia可用时，会优先使用chooseMedia
				// // uni.chooseImage
				// this.$refs.XeUpload.upload(type, {
				// 	count: 6,
				// 	sizeType: ['original', 'compressed'],
				// 	sourceType: ['album'],
				// });
				// // uni.chooseVideo
				// this.$refs.XeUpload.upload(type, {
				// 	sourceType: ['camera', 'album'],
				// });
				// // uni.chooseMedia (微信小程序2.10.0+;抖音小程序、飞书小程序;京东小程序支持)
				// this.$refs.XeUpload.upload(type, {
				// 	count: 9,
				// 	sourceType: ['album', 'camera'],
				// });
			},
			handleUploadCallback(e) {
				console.log('UploadCallback', e);
				if (e.data[0].type.indexOf('audio') == -1) {
					uni.showToast({
						title: '请选择音频文件上传',
						icon: 'none'
					});
					return;
				}
				if (['choose', 'success'].includes(e.type)) {
					// 根据接口返回修改对应的response相关的逻辑
					const tmpFiles = (e.data || []).map(({
						response,
						tempFilePath,
						name,
						fileType
					}) => {
						// 当前测试服务返回的数据结构如下
						// {
						//   "result": {
						//       "fileName": "fileName",
						//       "filePath": `http://192.168.1.121:3000/static/xxxxx.png`,
						//   },
						//   "success": true,
						// }
						const res = response?.result || {};
						const tmpUrl = res.filePath ?? tempFilePath;
						const tmpName = res.fileName ?? name;
						return {
							...res,
							url: tmpUrl,
							name: tmpName,
							fileType,
						};
					});
					this.fileList.push(...tmpFiles);
					uni.showLoading()
					this.handleUploadFile()
				}
			},
			submit() {
				if (!this.audioUrl) {
					this.$tools.toast('请上传音频后提交！');
					return
				}
				this.$emit('submit', this.audioUrl)
			},
			// 自定义上传
			handleUploadFile() {
				console.log(this.fileList[0]);
				let {
					url
				} = this.fileList[0]
				console.log('UploadFile', url);

				let date = this.$tools.formatDate(new Date())
				date = date.slice(0, date.indexOf(' '))
				let name = this.$tools.randomText() + this.fileList[0].name
				let key = `public/upload/audio/${date}/${name}`
				console.log('key', key);

				let data = {
					dir: key
				}
				this.$api.ossSign(data).then(oss => {
					console.log('data', oss);
					if (oss.code == 200) {
						this.ossInfo = oss.data
						try {
							uni.uploadFile({
								url: this.ossInfo.host, // 开发者服务器的URL。
								filePath: this.fileList[0].url,
								name: 'file', // 必须填file。
								formData: {
									key,
									policy: this.ossInfo.policy,
									OSSAccessKeyId: this.ossInfo.accessid,
									signature: this.ossInfo.signature,
									host: this.ossInfo.host
								},
								success: (uploadres) => {
									console.log('aaa', uploadres);
									if (uploadres.statusCode === 204) {
										console.log('上传成功');
										this.$tools.toast('音频上传成功！');
										this.$nextTick(() => {
											this.audioUrl = this.ossInfo.host + '/' + this.ossInfo.dir
											console.log('info', this.audioInfo);
										})
									}
								},
								fail: err => {
									console.log(err, 'err');
								}
							});
						} catch (e) {
							//TODO handle the exception
							console.log('err', e);
						}

					}
				})
				uni.uploadFile({
					url: 'http://192.168.31.185:3000/api/upload',
					filePath: url,
					name: 'file',
					success: (res) => {
						console.log('handleUpload success', res);
						const tmpData = JSON.parse(res.data);
						uni.showToast({
							title: tmpData.success ? '上传成功' : '上传失败',
							icon: 'none'
						});
					},
					fail: (err) => {
						console.log('handleUpload fail', err);
						uni.showToast({
							title: '出错啦',
							icon: 'none'
						});
					},
				});
			},
			// 预览
			handlePreview({
				url
			}) {
				console.log('PreviewFile', url);
				const fileType = this.getFileType(url);
				if (fileType === 'image') {
					return uni.previewImage({
						current: url,
						urls: [url],
					});
				}
				// #ifndef H5
				if (fileType === 'office') {
					return uni.openDocument({
						filePath: url,
						fail: (err) => {
							console.log(err);
							uni.showToast({
								icon: 'none',
								title: '文件预览失败'
							});
						},
					});
				}
				// #endif
				uni.showModal({
					title: '提示',
					content: url,
					showCancel: false,
				});
			},
			handleDeleteFile(index) {
				this.fileList.splice(index, 1);
			},
			/**
			 * 获取文件类型
			 * @param {String} fileName 文件链接
			 * @returns {String} fileType => '', image, video, audio, office, unknown
			 */
			getFileType(fileName = '') {
				const flieArr = fileName.split('.');
				let suffix = flieArr[flieArr.length - 1];
				if (!suffix) return '';
				suffix = suffix.toLocaleLowerCase();
				const image = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp'];
				if (image.includes(suffix)) return 'image';
				const video = ['mp4', 'm4v'];
				if (video.includes(suffix)) return 'video';
				const audio = ['mp3', 'm4a', 'wav', 'aac'];
				if (audio.includes(suffix)) return 'audio';
				const office = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'plain'];
				if (office.includes(suffix)) return 'office';
				return 'unknown';
			},
		},
	};
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.btn-click {
		transition: all 0.3s;
		opacity: 1;
	}

	.btn-click:active {
		opacity: 0.5;
	}

	.mgb-16 {
		margin-bottom: 16rpx;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.upload-wrap {
		width: 80vw;
		margin: 0 auto;
		border-radius: 16rpx;
		background: white;
		padding: 32rpx;
		background-color: transparent;

		.upload-btn {
			background: transparent;
			width: 100%;
			height: 176rpx;
			border: 2rpx dashed #AAAAAA;
			// background: #FAFAFA;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.upload-icon {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 8rpx;
			}

			.upload-text {
				font-size: 26rpx;
				color: #9E9E9E;
				line-height: 40rpx;
			}
		}

		.file-wrap {
			.file-line {
				width: 100%;
				background: #F5F5F5;
				border-radius: 8rpx;
				padding: 16rpx;
				font-size: 26rpx;
				color: #1A1A1A;
				line-height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.file-info {
					width: 90%;
					display: flex;
					align-items: center;

					.file-name {
						max-width: 80%;
						padding-left: 16rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.file-icon {
					width: 40rpx;
					height: 40rpx;
					flex-shrink: 0;
				}

				.file-empty {
					color: #999999;
				}
			}
		}
	}

	.btnBox {
		width: 65vw;
		margin: 20rpx auto 50rpx;
		display: flex;
		justify-content: center;

		.btn {
			width: 80%;
			background: #f5f7fa;
			border-radius: 20rpx;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
		}

		.btn1 {
			background-color: #6a8bff;
		}

		.btn2 {
			background-color: #5ac725;
		}
	}
</style>